<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Agn评分查询</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <script crossorigin="anonymous" integrity="sha384-c8inZyD0O4L/ErSuX3RVWgqsgtiAUw34TeSWiUwbKaXaI2RQg8SKVe80cipDBf0D" src="https://lib.baomitu.com/vue/2.6.7/vue.min.js"></script>
    <link crossorigin="anonymous" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-fYxN7HsDOBRo1wT/NSZ0LkoNlcXvpDpFy6WzB42LxuKAX7sBwgo7vuins+E1HCaw" src="https://lib.baomitu.com/moment.js/2.24.0/moment.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-U/+EF1mNzvy5eahP9DeB32duTkAmXrePwnRWtuSh1C/bHHhyR1KZCr/aGZBkctpY" src="https://lib.baomitu.com/axios/0.18.0/axios.min.js"></script>
    <style>
         [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">评分查询</a></li>
                <li><a target="acfun" href="http://www.acfun.cn/">Acfun</a></li>
                <li><a target="acfun" href="index.html">Agn生成器</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container" id="app" v-cloak>
    <form class="">
        <div class="form-group">
            <label for="ac">Agn评分查询</label>
            <input id="ac" type="text" class="form-control" placeholder="ac号/文章网址" v-model="acid">
        </div>
        <button  class="btn btn-default" @click="query">搜索</button>
        <button  class="btn btn-danger" @click="clearQuery()">清空</button>
    </form>
    <table class="table table-striped" style="margin-top: 40px">
        <thead>
            <th>标题</th>
            <th>原文链接</th>
            <th><a href="javascript:void(0)" @click="orderByScore">评分</a>{{reverse?'&darr;':'&uarr;'}}</th>
            <th>评论员</th>
            <th>评语</th>
            <th>评论内容</th>
        </thead>
        <tr v-for="item in list">
            <td><a href="javascript:void(0)" @click="getAcid(item.acid)" >{{item.title}}</a></td>
            <td><a :href="`http://www.acfun.cn/a/${item.acid}`" target="acfun">跳转</a></td>
            <td>{{item.score}}</td>
            <td><a :href="`http://www.acfun.cn/member/findUser.aspx?userName=${item.comment}`" target="acfun">{{item.comment}}</a></td>
            <td>{{item.summary}}</td>
            <td :title="item.content">查看</td>
        </tr>
    </table>
    <p class="h3 text-center" v-if="averageScore">平均分{{averageScore.toFixed(2)}}</p>
    <nav aria-label="">
        <ul class="pager">
            <li class="previous"><a @click="pagePrev" href="javascript:void(0)"><span aria-hidden="true">&larr;</span>上一页</a></li>
            <li class="next"><a @click="pageNext" href="javascript:void(0)">下一页<span aria-hidden="true">&rarr;</span></a></li>
        </ul>
    </nav>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data(){
            return {
                acid:'',
                author:'',
                page:1,
                comment:'',
                orderBy:'',
                reverse:true,
                list:[]
            }
        },
        created(){
            this.query()
        },
        computed:{
          averageScore(){
              return this.acid?this.list.reduce((a,b)=>a+b.score,0)/this.list.length:0
          }
        },
        methods:{
            orderByScore(){
              this.orderBy = 'score'
              this.reverse = this.reverse?'':'true'
              this.query()
            },
            clearQuery(){
              this.acid = ''
              this.page = 1
            },
            pageNext(){
                this.page++
                this.query()
            },
            pagePrev(){
                if(this.page>1){
                    --this.page
                    this.query()
                }
            },
            getAcid(acid){
                this.acid = acid
                this.page = 1
                this.query()
            },
            query(e){
                if(e){
                    e.preventDefault();
                }
                axios.get(`https://acfun.leanapp.cn/agnscore?acid=${this.acid.replace('http://www.acfun.cn/a/',"")}`+
                        `&page=${this.page}&author=${this.author}&orderBy=${this.orderBy}&reverse=${this.reverse}&comment=${this.comment}`).then(res=>{
                    if(res.data.code === 200){
                        this.list = res.data.data
                    }
                })
            }
        }
    })
</script>
</body>
</html>